<template>
  <div id="emergencyTaskArea" v-show="taskShow">
    <div id="tabs">
      <!-- <div
        :class="this.tabSelected === 10 && 'focus'"
        @click="() => (this.tabSelected = 10)"
      >
        数据处理任务
      </div> -->
      <div
        :class="tabSelected === 13 && 'focus'"
        @click="
          () => (
            (this.tabSelected = 13),
            (this.taskId=-1),
            (this.otherDotModal = true),
            (this.dotModal = false),
            (this.showReleaseTable = false),
            (this.pageSelected = 1)
          )
        "
      >
        监测产品生产任务
      </div>
      <div
        :class="this.tabSelected === 19 && 'focus'"
        @click="
          () => (
            (this.tabSelected = 19),
            (this.otherDotModal = true),
            (this.dotModal = false),
            (this.showReleaseTable = false),
            (this.pageSelected = 1)
          )
        "
      >
        制图任务
      </div>
      <div :class="this.showReleaseTable && 'focus'"
        v-show="showReleaseMonitoring"
        @click="showReleaseMonitoringTable">
        发布监控
      </div>
      <div
        v-show="dotShow"
        :class="this.taskId === 1 && 'focus'"
        @click="() => ((this.tabSelected = -1),(this.taskId=1),(this.otherDotModal = false), (this.dotModal = true),(this.showReleaseTable = false))"
      >
        火点判读
      </div>
      <img
        src="@/assets/icons/shrink.png"
        alt="X"
        class="iconBtn2"
        @click="hideDrawer"
      />
    </div>
    <div v-show="showReleaseTable">
      <Table
        :columns="publishColumn"
        border
        :data="publishData.slice(
              this.pageSelected * this.pageSize,
              (this.pageSelected + 1) * this.pageSize )"
      >
      <template slot-scope="{ row }" slot="status">
        <Button v-if="isFalse(row)" type="error">
          {{ row.status }}  </Button>
        <Button v-else class="primary"> {{ row.status }} </Button>
      </template>
      <template slot-scope="{ row  }" slot="action">
        <Button type="error" size="small" @click="deletePublish(row)">删除</Button>
      </template>
    </Table>
      <Page
        :total="publishData.length"
        :page-size="pageSize"
        show-total
        @on-change="changePage"
      ></Page>
    </div>
    <div v-show="otherDotModal">
      <Table
        :columns="columnNames"
        border
        :data="
          taskData
            .filter((d) => d.taskSource === this.tabSelected)
            .slice(
              this.pageSelected * this.pageSize,
              (this.pageSelected + 1) * this.pageSize
            )
        "
      >
        <template slot-scope="{ row, index }" slot="status">
          <Button v-if="row.status == 1" class="stastusBtn executing">
            执行中
          </Button>
          <button v-if="row.status == 2" class="stastusBtn pause">暂停</button>
          <button v-if="row.status == 3" style="color: #f9b115">删除</button>
          <button v-if="row.status == 4" class="stastusBtn success">
            成功
          </button>
          <button v-if="row.status == 5" class="stastusBtn fail">失败</button>
          <button v-if="row.status == 6" style="color: #f9b115">超时</button>
          <button v-if="row.status == 7" class="stastusBtn stop">停止</button>
          <button v-if="row.status == 8" class="stastusBtn pending">
            待执行
          </button>
          <button v-if="row.status == -1" class="stastusBtn pending">
            未提交
          </button>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="() => inspectTask(row)"
            >查看</Button
          >
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="() => taskDetail(row)"
            >详情</Button
          >
          <!-- <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="() => taskInteraction(row)"
            >交互</Button
          > -->
          <!-- <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="() => downloadTask(row)"
            >下载</Button
          > -->
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="() => terminateShow(row)"
            >终止</Button
          >
          <Button type="error" size="small" @click="() => deleteShow(row)"
            >删除</Button
          >
        </template>
      </Table>
      <Page
        :total="
          taskData.filter((d) => d.taskSource === this.tabSelected).length
        "
        :page-size="pageSize"
        show-total
        @on-change="changePage"
      ></Page>
    </div>
    <!-- 判读火点弹框 -->
    <Modal v-model="fireSelectedModal" draggable scrollable>
      <p slot="header" class="modalHeader">
        <span>判读操作</span>
      </p>
      <div class="modalBody">
        <p>请确认是否保存判读结果</p>
        <p>是, 则保存数据；否,则取消操作</p>
      </div>
      <template #footer class="footerBtns">
        <CButton
          @click="fireInterpretationOk"
          color="info"
          class="system-btn-style"
          >是</CButton
        >
        <CButton
          @click="fireInterpretationCancel"
          color="info"
          class="cancel-btn"
          >否</CButton
        >
      </template>
    </Modal>
    <div v-show="dotModal">
      <div
        style="
          display: flex;
          justify-content: left;
          align-content: center;
          margin-left: 20px;
          display: absolute;
        "
      >
        <div style="margin: 10px; display: flex; justify-content: flex-start">
          <span style="font-size: 16px; margin-right: 10px">时段选择 </span>
          <!-- <CButton
            class="buttonStyle"
            @click="changeTime"
            style="margin-right: 10px"
            >当日</CButton
          > -->
          <!-- <span style="font-size: 16px;margin-right">自定义</span> -->
          <el-date-picker
            style="
              width: 320px;
              height: 30px;
              text-align-last: center;
              margin-left: 10px;
            "
            aotocomplete="off"
            @change="mysubmittime()"
            v-model="customTime"
            type="daterange"
          ></el-date-picker>
          <div style="font-size: 16px; margin-left: 16px">
            <span style="font-size: 16px; margin-right: 10px">火点判读</span>
            <Select
              transfer
              style="
                width: 220px;
                height: 30px;
                text-align: center;
                text-align-last: center;
              "
              v-model="selectFire"
              @on-change="selectFireChange"
            >
              <Option
                v-for="item in fireValueAll"
                :value="item.value"
                :key="item.label"
              >
                {{ item.label }}
              </Option>
            </Select>
          </div>
        </div>
      </div>
      <Table
        border
        :columns="columnDotNames"
        :data="
          taskDotData.slice(
            this.pageSelectedDot * this.pageSize,
            (this.pageSelectedDot + 1) * this.pageSize
          )
        "
      >
        <template slot="dotStatus" slot-scope="{ index, row }">
          <Select
            transfer
            style="width: 100px; text-align: center; text-align-last: center"
            v-model="row.status"
            @on-change="fireSelectedChange($event, row)"
          >
            <Option
              v-for="item in fireValue"
              :value="item.value"
              :key="item.label"
            >
              {{ item.label }}
            </Option>
          </Select>
        </template>
        <template slot="dotAction" class="buttonStyle" slot-scope="{ row }">
          <CButton
            type="primary"
            style="margin-right: 5px"
            @click="fixedDot($event, row)"
            >定位</CButton
          >
          <CButton
            type="primary"
            style="margin-right: 5px"
            @click="fixedDotCancel($event, row)"
            >取消</CButton
          >
        </template>
      </Table>

      <Page
        :total="taskDotData.length"
        :page-size="pageSize"
        show-total
        @on-change="changeDotPage"
      ></Page>
    </div>

    <Modal v-model="stopShow" draggable scrollable title="终止任务">
      <p>确认要终止任务吗？</p>
      <template #footer class="footerBtns">
        <CButton @click="stopShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="terminateTask" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除任务"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务</span>
      </p>
      <div class="modalBody">
        <p>删除任务时与任务相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="deleteTask" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="showDownload"
      draggable
      scrollable
      title="下载列表"
      :styles="modalStyle"
      class="downLoadModal"
    >
      <!-- 复选 : show-checkbox -->
      <Tree
        @on-select-change="selectTree"
        :data="treeData"
        ref="tree"
        class="demo-tree-render"
        style="overflow: auto"
      ></Tree>

      <template #footer class="footerBtns">
        <CButton @click="showDownload = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="downloadProduct" color="info" class="system-btn-style"
          >下载</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
import Axios from "axios";
import wktToGeoJson from "../../../utils/WKTToGeoJson";
export default {
  name: "detailTaskArea",
  components: {},
  props: {
    modelShow: {
      type: Boolean,
      default: false,
    },
    nodeSelectLeaf: {
      type: Array,
    },

    map: {
      type: Object,
    },
    afterMap: {
      type: Object,
    },
    leftDataList: {
      type: Array,
    },
  },
  data() {
    return {
      checked: true,
      //selectFire: { label: "待判读", value: 0 },
      selectFire: "",
      fireValue: [
        { label: "伪火点", value: 0 },
        { label: "真火点", value: 1 },
        { label: "待判读", value: 2 },
      ],
      fireValueAll: [
        { label: "伪火点", value: 0 },
        { label: "真火点", value: 1 },
        { label: "待判读", value: 2 },
        { label: "全部", value: -1 },
      ],
      nodeSelectLeafList: [], //左侧勾选的叶子数据
      queryDot: [],
      customTime: "", //自定义时间
      otherDotModal: true,
      fireSelectedModal: false,
      dotShow: false,
      dotModal: false,
      taskDotData: [],
      dotDataTotal: [], //火点文件
      leftDataTotalList: [],

      fireData: [],
      taskShow: false,
      timer: "",
      taskId: -1,
      tabSelected: 13,
      taskData: [],
      dataCount: 0,
      pageSize: 3,
      pageSelected: 0,
      pageSelectedDot: 0,
      columnNames: [
        {
          title: "序号",
          key: "id",
          className: "centerCol",
          width: 100,
        },
        {
          title: "任务名称",
          key: "groupTaskName",
          className: "taskNameCol",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerCol",
          width: 200,
        },
        {
          title: "结束时间",
          key: "endTime",
          className: "centerCol",
          width: 200,
        },
        {
          title: "成功",
          key: "successNumber",
          className: "centerCol",
          width: 80,
        },
        {
          title: "失败",
          key: "failNumber",
          className: "centerCol",
          width: 80,
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          width: 132,
        },
        {
          title: "操作",
          slot: "action",
          width: 320,
          align: "center",
        },
      ],
      columnDotNames: [
        {
          title: "序号",
          key: "dotId",
          align: "center",
          width: 100,
        },

        {
          title: "经度",
          key: "lat",
          align: "center",
          width: 120,
        },
        {
          title: "纬度",
          key: "lon",
          align: "center",
          width: 120,
        },
        {
          title: "火点时间",
          key: "produceTime",
          align: "center",
          width: 200,
        },
        {
          title: "火点文件",
          key: "productName",
          align: "center",
          width: 450,
        },
        {
          title: "影像名称",
          key: "sourceName",
          align: "center",
          width: 400,
        },
        {
          title: "判读情况",
          key: "condition",
          align: "center",
          slot: "dotStatus",
          width: 150,
        },
        {
          title: "操作",
          slot: "dotAction",
          width: 200,
          align: "center",
        },
      ],

      modalStyle: { top: "200px" },
      stopShow: false,
      delShow: false,
      clickId: void 0,
      showDownload: false,
      treeData: [],
      productpath: "",
      someStatus: [
        "",
        "执行中",
        "暂停",
        "删除",
        "成功",
        "失败",
        "超时",
        "停止",
        "待执行",
        "部分失败",
      ],
      someClasses: [
        "",
        "blue",
        "grey",
        "red",
        "green",
        "red",
        "red",
        "grey",
        "grey",
        "yellow",
      ],
      showReleaseMonitoring: false,
      showReleaseTable: false,
      publishColumn: [
        {
          title: "序号",
          key: "index",
          className: "centerCol",
          width: 100,
        },
        {
          title: "数据名称",
          key: "path",
          className: "taskNameCol",
          align: "center",
        },
        {
          title: "目标事件",
          key: "eventName",
          className: "taskNameCol",
          align: "center",
        },
        {
          title: "产品类型",
          key: "type",
          className: "taskNameCol",
          align: "center",
          width: 150,
        },
        {
          title: "开始时间",
          key: "createTime",
          className: "centerCol",
          width: 200,
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          width: 132,
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      publishData: [],
    };
  },
  methods: {
    deletePublish(val){
      let path =  this.$api.emergencyMonitorApi.deletePublish + val.id
      this.http.delete(path).then(res => {
        if(res.data.success){
          this.$Message.info("删除成功")
          console.log(this.pageSelected)
          console.log(this.publishData.length)
          console.log((this.pageSelected  * this.pageSize + 1))
          let pageIndex = this.pageSelected * this.pageSize + 1
          if( this.publishData.length === pageIndex && pageIndex > 1 ){
            this.pageSelected = this.pageSelected - 1
            console.log(this.pageSelected)
          }
          this.getPublishData()
        }
      })
    },
    getPublishData(){
      let taskId = this.$route.query.id;
      let path = this.$api.emergencyMonitorApi.getPublishData 
      let params = {
        taskId: taskId
      } 
      this.http.get(path,params).then(res => {
        console.log(res.data)
        if(res.data.success){
          let result = res.data.data
          this.publishData = [];
          result.forEach((item,index) => {
              let path = item.path.split("/")
              let obj = {
                index: index + 1,
                createTime: item.createTime,
                dataId:item.dataId,
                eventId: item.eventId,
                eventName:item.eventName,
                id: item.id,
                path:path[path.length - 1],
                status:item.status,
                taskId:item.taskId,
                type:item.type,
                updateTime:item.updateTime
              }
              this.publishData.push(obj)
          });
        }
      })
      console.log('publishData',this.publishData)
    },
    isFalse(row){
      console.log(row)
      return row.status.includes("失败") || row.status.includes("错误")
    },
    showReleaseMonitoringTable() {
      this.otherDotModal = false;
      this.dotModal = false;
      this.tabSelected = -1;
      this.pageSelected = 1
      this.showReleaseTable = true;
    },
    selectFireChange(value) {
      // if (value == undefined) value = "";
      this.selectFire = value;
      //console.log("火点判读筛选", this.selectFire); //selectFire
      this.taskDotData = [];
      let _this = this;
      let selectArr = [];
      debugger;
      //console.log(this.queryDot,"this.queryDot")
      this.queryDot.forEach((node) => {
        if (node.status == this.selectFire) {
          selectArr.push(node);
        } else if (this.selectFire == -1) {
          selectArr.push(node);
        }
      });
      debugger;
      console.log(_this.customTime, "_this.customTime ");
      if (_this.customTime == "" || _this.customTime == null) {
        this.taskDotData = selectArr;
        console.log("this.taskDotData", this.taskDotData);
      } else {
        let val1 = new Date("'" + this.customTime[0] + "'");
        let val2 = new Date("'" + this.customTime[1] + "'");
        val2 = val2.setDate(val2.getDate() + 1);
        val2 = new Date(val2);
        let Arr = [];
        selectArr.forEach((node) => {
          let date = new Date(node.produceTime);
          if (
            val1.getTime() < date.getTime() &&
            val2.getTime() > date.getTime()
          ) {
            Arr.push(node);
          } else if (
            val1.getTime() === date.getTime() ||
            val2.getTime() === date.getTime()
          ) {
            Arr.push(node);
          }
        });
        this.taskDotData = Arr;
      }
    },

    //自定义时间
    mysubmittime() {
      this.selectFire = "";
      debugger;
      let Arr = [];
      let _this = this;
      let selectArr = [];
      let val1 = new Date("'" + this.customTime[0] + "'");
      let val2 = new Date("'" + this.customTime[1] + "'");
      val2 = val2.setDate(val2.getDate() + 1);
      val2 = new Date(val2);
      console.log("自定义时间", val1, val2);
      debugger;
      // console.log(this.queryDot,"this.queryDot")
      _this.queryDot.forEach((node) => {
        let date = new Date(node.produceTime);
        if (
          val1.getTime() < date.getTime() &&
          val2.getTime() > date.getTime()
        ) {
          Arr.push(node);
        } else if (
          val1.getTime() === date.getTime() ||
          val2.getTime() === date.getTime()
        ) {
          Arr.push(node);
          console.log(val1, val2);
        }
      });

      //选择自定义时间段--未选择火点判读情况
      this.taskDotData = Arr;
      // this.saveDotData = Arr;
      debugger;
      if (this.selectFire != "") {
        //选择火点判读状态后---时间段默认就是火点当前时间
        Arr.forEach((item) => {
          // console.log(this.selectFire, " this.selectFire");
          if (item.status == this.selectFire) {
            selectArr.push(item);
          }
        });
        this.taskDotData = selectArr;
      } else {
        //
        this.taskDotData = Arr;
      }
    },
    //火点判读函数
    fireSelectedChange(value, row) {
      debugger;
      console.log(value);
      this.fireSelectedModal = true;
      row.status = Number(value);
      this.currentFireRow = row;
    },
    fireInterpretationCancel() {
      this.fireSelectedModal = false;
    },
    //火点判读保存
    fireInterpretationOk() {
      console.log(this.pageSelectedDot, "pageSelectedDot");
      debugger;
      let _this = this;
      let path = this.$api.riskMonitorApi.upDataFile;
      let updateDotDataTotal = [];
      let Arr = {};
      let fields = [];
      _this.dotDataTotal.forEach((node) => {
        if (node.productName === _this.currentFireRow.productName) {
          for (let i = 0; i < node.fields.length; i++) {
            let coordinate = "";
            let status = -1;
            let fireId = -1;
            let obj = {
              coordinate: coordinate,
              status: status,
              fireId: fireId,
            };

            if (
              node.dataId.toString() + node.fields[i].fireId.toString() ==
                _this.currentFireRow.dotId &&
              node.fields[i].status != this.currentFireRow.status
            ) {
              status = Number(this.currentFireRow.status);
            } else {
              status = node.fields[i].status;
            }
            obj.coordinate = node.fields[i].coordinate;
            obj.status = status;
            obj.fireId = node.fields[i].fireId;
            fields.push(obj);
          }
          Arr = {
            id: node.id,
            produceTime: node.produceTime,
            productName: node.productName,
            sourceName: node.sourceName,
            taskId: node.taskId,
            fields: fields,
          };
          updateDotDataTotal.push(Arr);
        }
      });
      this.http.post(path, updateDotDataTotal[0]).then((res) => {
        this.fireSelectedModal = false;
        if (res.data.success) {
          this.$Message.success("保存成功");
          console.log(this.pageSelectedDot, "pageSelectedDot");
          this.getDotData();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    fixedDotCancel(value, row) {
      let shpDotId = row.lat + row.lon + row.sourceName;
      //  let coordinates = [row.lon, row.lat];
      this.removeLayer(shpDotId);
    },
    //火点定位
    fixedDot(value, row) {
      let shp_L5 = [];
      let img_L4 = [];
      let leftDataTotalList = this.leftDataTotalList;
      let produceCode = "";
      if (row.sourceName.includes("L4")) {
        produceCode =
          row.sourceName.split("_")[row.sourceName.split("_").length - 1];
      }
      //筛选出目录树上火点的l5矢量和l4影像
      for (let i = 0; i < leftDataTotalList.length; i++) {
        //判断左侧目录树正常显示的回火点L5数据
        if (
          leftDataTotalList[i].level.includes("L5") &&
          leftDataTotalList[i].name.includes(".shp") &&
          leftDataTotalList[i].name.includes(produceCode) &&
          leftDataTotalList[i].status === "normal"
        ) {
          shp_L5.push(leftDataTotalList[i]);
        }
        //判断左侧目录树是否有影像数据
        if (
          leftDataTotalList[i].level.includes("L4") &&
          leftDataTotalList[i].name.includes(produceCode) &&
          leftDataTotalList[i].status === "normal"
        ) {
          if (
            leftDataTotalList[i].name.includes(".tif") ||
            leftDataTotalList[i].name.includes(".img") ||
            leftDataTotalList[i].name.includes(".jpg")
          ) {
            img_L4.push(leftDataTotalList[i]);
          }
        }
      }
      // console.log(img_L4, shp_L5, "shp_L5shp_L5shp_L5");

      //加载l4的影像数据
      if (img_L4.length) {
        let imgpath = img_L4[0].path + "/" + img_L4[0].name;
        let imgDotId = row.lat + row.lon + row.sourceName + "img";
        // this.fixedDotImg(imgpath, imgDotId);
      } else {
        this.$Message.warning("该L4级影像数据不存在于目录树！");
      }
      this.$emit("dotImgAndShp", img_L4, shp_L5[0]);
      this.$emit("aux");
      //加载矢量火点图层
      if (shp_L5.length) {
        let shpDotId = row.lat + row.lon + row.sourceName;
        let coordinates = [row.lon, row.lat];

        this.fixedDotShp(shpDotId, coordinates);
      } else {
        this.$Message.warning("该L5级火点数据不存在于目录树！");
      }
    },
    fixedDotImg(imgPath, layerID) {
      let path = url1 + "/transferPost";
      Axios.get(path, {
        params: {
          url: "?request=GetImageInfo",
          params: JSON.stringify([imgPath]),
        },
      }).then((res) => {
        let envelop = res.data[0].envelope;
        let bandCount = res.data[0].band_count;
        let left = envelop.left;
        let right = envelop.right;
        let top = envelop.top;
        let bottom = envelop.bottom;
        // let nodata_value=res.data[0].nodata_value;
        let bounds = [
          [left, bottom],
          [right, top],
        ];
        let kind = "";
        if (bandCount == 1) {
          kind = "dem";
          //externalNodataValue=[0];
        } else {
          kind = "trueColor";
        }

        let bandMap = [4, 3, 2];
        let stretch = {
          kind: "standardDeviation",
          percent: 0.2,
        };
        let info = {
          info: [
            {
              path: `${imgPath}`,
              style: {
                kind: `${kind}`,
                bandMap: bandMap,
                stretch: stretch,
              },
            },
          ],
        };
        const source = {
          type: "raster",
          bounds: [...bounds[0], ...bounds[1]],
          tiles: [
            `${url3}/v1?request=GetTile&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&info=${encodeURIComponent(
              JSON.stringify(info)
            )}`,
          ],
          tileSize: 256, // 返回图片大小默认是256
        };
        let tempMap = this.map;
        tempMap.addLayer({
          id: layerID,
          type: "raster",
          source: source,
          paint: {
            "raster-opacity": 1,
          },
        });
      });
    },

    removeLayer(layerID) {
      if (this.map.getLayer(layerID)) {
        this.map.removeLayer(layerID);
      }
      if (this.map.getSource(layerID)) {
        this.map.removeSource(layerID);
      }
      if (this.afterMap.getLayer(layerID)) {
        this.afterMap.removeLayer(layerID);
      }
      if (this.afterMap.getSource(layerID)) {
        this.afterMap.removeSource(layerID);
      }
    },
    fixedDotShp(layerId, coordinates) {
      this.check = !this.check;
      //  this.removeLayer("fireLayerId");
      if (this.checked ? true : false) {
        this.removeLayer("fireLayerId");
      } else {
        this.removeLayer("fireLayerId");
      }
      let self = this;
      let geojsonPoints = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {
              id: 1,
              name: "point1",
            },
            geometry: {
              type: "Point",
              coordinates: coordinates,
            },
          },
        ],
      };

      //将数据放于pointlayer显示
      self.map.addSource("fireLayerId", {
        type: "geojson",
        data: geojsonPoints,
      });
      self.map.addLayer({
        id: "fireLayerId",
        type: "circle",
        source: "fireLayerId",
        paint: {
          "circle-opacity": 1,
          "circle-radius": 10,
          "circle-color": "#FFA500",
        },
      });

      this.map.flyTo({
        center: coordinates,
        zoom: 12,
      });
    },

    //火点当日数据
    changeTime() {
      let _this = this;

      let toDayDate = new Date();

      let year = toDayDate.getFullYear(); //得到年份
      let month = toDayDate.getMonth() + 1; //得到月份
      let date = toDayDate.getDate(); //得到日期
      let dateTime =
        year.toString() + "-" + month.toString() + "-" + date.toString();
      let Arr = [];
      _this.queryDot.forEach((node) => {
        if (node.produceTime.includes(dateTime)) Arr.push(node);
      });
      this.taskDotData = Arr;
      console.log(this.taskDotData, " this.taskDotData");
    },
    // 获取任务列表value
    async getData() {
      if (this.taskId === -1) return;

      const path = this.$api.riskMonitorApi.queryTask + this.taskId + "/tasks";
      this.http.get(path).then((res) => {
        let data = res.data;
        if (data.success) {
          let taskData = data.data;

          let arr = [];
          taskData.forEach((item) => {
            if (item.workFlowId != "724" && item.workFlowId != "751") {
              arr.push(item);
            }
          });
          this.taskData = arr;
        } else {
          this.$Message.warning("通过任务id获取任务列表失败");
          return;
        }
      });
    },
    //获得火点数据
    async getDotData() {
      this.taskDotData = [];
      const path = this.$api.riskMonitorApi.riskDotQuery;
      await this.http.get(path).then((res) => {
        let data = res.data;
        if (data.success) {
          let DotData = data.data;
          this.dotDataTotal = DotData;
          let ArrGroup = [];
          DotData.forEach((node) => {
            if (node.fields) {
              let lon = -1;
              let lat = -1;
              let status = "";
              let fireId = -1;
              let dotId = -1;
              for (let i = 0; i < node.fields.length; i++) {
                let a = node.fields[i].coordinate
                  .replace("(", " ")
                  .replace(")", " ")
                  .replace(",", " ")
                  .trim()
                  .split(/\s+/);
                lon = Number(a[1]);
                lat = Number(a[2]);
                status = node.fields[i].status;
                fireId = node.fields[i].fireId;
                console.log(node);
                dotId =
                  node.dataId.toString() + node.fields[i].fireId.toString();
                let Arr = {
                  id: node.dataId,
                  productName: node.productName,
                  produceTime: node.produceTime,
                  sourceName: node.sourceName,
                  lon: lon,
                  lat: lat,
                  status: status,
                  fireId: fireId,
                  dotId: dotId,
                };
                ArrGroup.push(Arr);
              }
            }
          });

          this.taskDotData = ArrGroup;
          this.queryDot = ArrGroup;
        } else {
          this.$Message.warning("通过任务id获取火点列表失败");
          return;
        }
      });
      console.log(this.pageSelectedDot, "pageSelectedDot");
    },
    changePage(index) {
      this.pageSelected = index - 1;
    },
    changeDotPage(index) {
      debugger;

      this.pageSelectedDot = index - 1;
    },

    // 查看
    inspectTask(row) {
      String.prototype.replaceAll = function (s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
      };

      let userLink =
        `/taskManage/allTask/${row.id}/${row.groupTaskName.replaceAll(
          "/",
          "*"
        )}` + "?";
      const href = this.$router.resolve({
        path: userLink,
        query: {
          // pageNum: this.pageNum,
          from: "taskLook",
          taskType: row.taskSource,
        },
      });
      window.open(href.href, "_blank");
    },

    // 详情
    taskDetail(row) {
      this.$router.push({
        path: "/processing",
        query: {
          from: "taskLook",
          id: row.id,
          status: row.status,
        },
      });
    },
    //下载
    async downloadTask(row) {
      let path = this.$api.taskManageApi.taskDetailResult + row.id;
      // TODO: 需要筛选是否存在product，对接后端

      const { data } = await Axios.get(path, {
        params: {
          productType: -1,
        },
      });
      if (!data || data.code != 0) {
        this.$Message.warning((data && data.message) || "获取影像产品数据失败");
      } else if (!data.data || data.data.length === 0) {
        this.$Message.warning("暂无影像产品数据");
      } else {
        this.showDownload = true;
        this.treeData = this.getNewTreeData(data.data);
      }
    },

    downloadProduct() {
      // this.productpath =
      //   "/pie/data/247/sthx_user_data/pieadmin/lilintest/123/GF3_KAS_QPSI_010970_E81.2_N40.5_20180910_L1A_VH_L10003442728.tif";
      if (!this.productpath) {
        this.$Message.warning("请选择下载的产品文件");
        return;
      }

      let newarr = [];
      newarr.push(this.productpath);
      let path = this.$api.taskManageApi.downloadReport + newarr;
      window.open(path);
    },

    //提取文件夹里面所有的文件
    getNewTreeData(data) {
      let result = [];
      for (let i = 0; i < data.length; i++) {
        let tempItem = data[i];
        let item = {};
        item.expand = tempItem.expand;
        item.path = tempItem.path;
        item.title = tempItem.title;
        item.type = tempItem.type;
        item.children = [];
        result.push(item);

        if (tempItem.type == "folder" && tempItem.children) {
          let list = [];
          this.recursiveTreeFile(tempItem.children, list);
          item.children = list;
        }
      }
      return result;
    },

    recursiveTreeFile(data, list) {
      for (let i = 0; i < data.length; i++) {
        let tempItem = data[i];
        if (tempItem.type == "file") {
          list.push(tempItem);
        }
        if (tempItem.type == "folder" && tempItem.children) {
          this.recursiveTreeFile(tempItem.children, list);
        }
      }
      return list;
    },

    selectTree() {
      let item = this.$refs.tree.getSelectedNodes()[0];
      if (!item) return;
      this.productpath = this.$refs.tree.getSelectedNodes()[0].path;
      if (item.type === "folder") {
        item.expand = !item.expand;
        item.selected = !item.selected;
        return;
      }
    },

    terminateShow(row) {
      this.stopShow = true;
      this.clickId = row.id;
    },

    // 终止
    async terminateTask() {
      this.stopShow = false;
      let path = this.$api.taskManageApi.updateStatus + "/" + this.clickId;

      const formdata = new FormData();
      formdata.append("statusName", "STOP");

      const { data } = await Axios.put(path, formdata);
      if (!data || !data.success) {
        this.$Message.warning((data && data.message) || "终止任务失败");
      } else {
        // Success
        // Update view
        await this.getData();
      }
    },

    deleteShow(row) {
      this.delShow = true;
      this.clickId = row.id;
    },
    // 删除
    async deleteTask() {
      this.delShow = false;
      let path = this.$api.taskManageApi.delete + this.clickId;

      const { data } = await Axios.delete(path);
      if (!data || !data.success) {
        this.$Message.warning((data && data.message) || "删除任务失败");
      } else {
        // Success

        // Update view
        await this.getData();
      }
    },
    hideDrawer() {
      this.$emit("taskControlHide");
    },
  },
  watch: {
    taskId: {
      handler(val) {
        this.getData();
      },
      immediate: true,
    },
    modelShow: {
      handler(val) {
        this.taskShow = val;
      },
      deep: true,
      immediate: true,
    },
    leftDataList: {
      handler(val) {
        this.leftDataTotalList = val;
        console.log(this.nodeSelectLeafList, "mmmmmm");
      },
      deep: true,
      immediate: true,
    },
    nodeSelectLeaf: {
      handler(val) {
        this.nodeSelectLeafList = val;
        console.log(this.nodeSelectLeafList, "mmmmmm");
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.taskId = this.$route.query.id;
    this.showReleaseMonitoring = ['海冰冰凌','干旱'].indexOf(this.$route.query.name) > -1;
    if (['海冰冰凌','干旱'].indexOf(this.$route.query.name) > -1) {
      this.getPublishData()
      this.timerPublish = setInterval(() => {
        this.getPublishData();
      }, 10000);
    }
    if (this.taskId == 1) {
      this.dotShow = true;
      this.getDotData();
    }

    this.getData();
    this.timer = setInterval(() => {
      this.getData();
    }, 10000);
  },

  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  computed: {},
};
</script>

<style lang="scss">
#emergencyTaskArea {
  width: 100%;
  height: 100%;
  margin: -16px;

  font-family: Microsoft YaHei, monospace;
}

#emergencyTaskArea #tabs {
  display: flex;
}
#emergencyTaskArea #task {
  display: flex;
}
#emergencyTaskArea #tabs img {
  transform: rotate(270deg);
}

#emergencyTaskArea #tabs div {
  box-sizing: border-box;
  width: 10em;
  padding: 10px;
  text-align: center;

  cursor: pointer;
}

#emergencyTaskArea #tabs div.focus,
#emergencyTaskArea #tabs div:hover {
  color: #5290e8;
  border-bottom: 1px solid #5290e8;
}

#emergencyTaskArea .ivu-table-wrapper {
  height: 100%;
  width: 100%;
}

#emergencyTaskArea .ivu-table-overflowX {
  overflow-x: hidden;
}

#emergencyTaskArea .ivu-table-body {
  display: block !important;
  height: 180px;
  overflow-x: hidden;
  overflow-y: scroll;
}

#emergencyTaskArea .ivu-table-header thead tr th {
  text-align: center !important;
}

#emergencyTaskArea .ivu-table-tip {
  display: none;
}

#emergencyTaskArea button {
  cursor: pointer;
}

#emergencyTaskArea .ivu-page {
  height: 20%;

  text-align: center;
  margin-top: 5px;
  margin-right: 180px;
}

#emergencyTaskArea .ivu-page-total {
  margin-right: 60px;
}

.statusBtn {
  width: 5em;
  border: none;
  border-radius: 4px;
  cursor: default !important;
}

.statusBtn span,
.statusBtn:hover span {
  color: white;
}
.statusBtn.red,
.statusBtn.red:hover {
  background-color: red;
}
.statusBtn.blue,
.statusBtn.blue:hover {
  background-color: #5290e8;
}
.statusBtn.yellow,
.statusBtn.yellow:hover {
  background-color: yellow;
}
.statusBtn.green,
.statusBtn.green:hover {
  background-color: rgb(103, 185, 165);
}
.statusBtn.grey,
.statusBtn.grey:hover {
  background-color: rgb(200, 200, 200);
}

.centerCol {
  text-align: center !important;
  width: auto;
}
.iconBtn2 {
  position: absolute;
  bottom: 260px;
  right: 0;
  height: 36px;
  // border-radius: 50%;
  z-index: 3;
  transform: rotate(90deg);
}
.iconBtn2:hover {
  opacity: 1 !important;
}
.buttonStyle {
  font-size: 16px;
  margin-left: 10px;
  border: none;
  margin-top: -5px;
  padding: 0;
}
.buttonStyle:hover {
  font-size: 16px;
  margin-left: 10px;
  border: none;
  padding: 0cm;
  opacity: 1 !important;
  margin-top: -5px;
}
</style>